<template>
    <div class="wrapper">

        <!--header部分---->
        <header>
            <p>增加菜品</p>
        </header>

        <!--表单部分-->
        <ul class="form-box">
            <li>
                <div class="title">
                    新食物编号：
                </div>
                <div class="content">
                    <input type="number" @blur="checkfoodId" v-model="food.foodId" placeholder="新食物编号">
                </div>
            </li>
            <li>
                <div class="title">
                    新食物名字：
                </div>
                <div class="content">
                    <input type="text" v-model="foodName" placeholder="新食物名字">
                </div>
            </li>
            <li>
                <div class="title">
                    新食物介绍：
                </div>
                <div class="content">
                    <input type="text" v-model="foodExplain" placeholder="新食物介绍">
                </div>
            </li>
            <li>
                <div class="title">
                    新食物价格：
                </div>
                <div class="content">
                    <input type="number" v-model="foodPrice" placeholder="新食物价格">
                </div>
            </li>
            <li>
                <div class="title">
                    商家编号：
                </div>
                <div class="content">
                    <input type="number" v-model="businessId" placeholder="商家编号">
                </div>
            </li>
            <li>
                <div class="title">
                    备注：
                </div>
                <div class="content">
                    <input type="text" v-model="remarks" placeholder="备注">
                </div>
            </li>
        </ul>

        <div class="button-login">
			<button @click="add">添加菜品</button>
		</div>

        <!-- 底部菜单部分 -->
		<BusinessFooter></BusinessFooter>
    </div>
</template>

<script>
    
import BusinessFooter from '../components/BusinessFooter.vue';

     export default{
        name:'AddMenu',
        data(){
            return{
                food:{
                    foodId:'',
                    foodName:'',
                    foodExplain:'',
                    foodPrice:'',
                    businessId:'',
                    remarks:''
                },
            }
        },
        methods:{
            checkfoodId(){

            },
            add(){
                if(this.food.foodId == ''){
                    alert('食物编号不能为空！');
                    return;
                }
                if(this.food.foodName == ''){
                    alert('食物名字不能为空！');
                    return;
                }
                if(this.food.foodExplain == ''){
                    alert('食物介绍不能为空！');
                    return;
                }
                if(this.food.foodPrice == ''){
                    alert('食物价格不能为空！');
                    return;
                }
                if(this.food.businessId == ''){
                    alert('商家编号不能为空！');
                    return;
                }
                if(this.food.foodExplain == ''){
                    alert('食物介绍不能为空！');
                    return;
                }
                if(this.food.remarks == ''){
                    alert('备注不能为空！');
                    return;
                }
            }
        },
        components:{
            BusinessFooter
        }
     }
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 表单部分 ******************/
	.wrapper .form-box {
		width: 100%;
		margin-top: 12vw;
	}

	.wrapper .form-box li {
		box-sizing: border-box;
		padding: 4vw 3vw 0 3vw;
		display: flex;
		align-items: center;
	}

	.wrapper .form-box li .title {
		flex: 0 0 18vw;
		font-size: 3vw;
		font-weight: 700;
		color: #666;
	}

	.wrapper .form-box li .content {
		flex: 1;
	}

	.wrapper .form-box li .content input {
		border: none;
		outline: none;
		width: 100%;
		height: 4vw;
		font-size: 3vw;
	}

	.wrapper .button-login {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw 3vw 0 3vw;
	}

	.wrapper .button-login button {
		width: 100%;
		height: 10vw;
		font-size: 3.8vw;
		font-weight: 700;
		color: #fff;
		background-color: #38CA73;
		border-radius: 4px;

		border: none;
		outline: none;
	}

	.wrapper .add {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw 3vw 0 3vw;
	}

	.wrapper .add button {
		width: 100%;
		height: 10vw;
		font-size: 3.8vw;
		font-weight: 700;
		color: #666;
		background-color: #EEE;
		border-radius: 4px;

		border: none;
		outline: none;
		border: solid 1px #DDD;
	}
</style>